<template>
  <div class="banner-small">
    <el-row>
      <el-col :xs="24" :sm="0" :md="0" :lg="0" :xl="0">
        <el-carousel :interval="4000" height="110px">
          <el-carousel-item v-for="item in bannerList" :key="item.targetId">
            <img :src="item.imageUrl" alt="网络不好" class="img" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    bannerList: Array
  },
  setup() {
    return {}
  }
})
</script>

<style scoped lang="less">
.banner-small {
  .img {
    width: 100%;
  }
  ::v-deep .el-carousel__button {
    border: 1px solid gray;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  ::v-deep .el-carousel__indicators--horizontal {
    bottom: -10px;
    left: auto;
    right: 0;
  }
}
</style>
